<template>
  <div class="optimize-case-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="gradient-title">
        <el-icon><Opportunity /></el-icon>
        简历优化案例库
      </h1>
      <p class="page-subtitle">真实用户案例，展示优化前后对比效果</p>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-radio-group v-model="filterType">
        <el-radio-button
            v-for="item in filterOptions"
            :key="item.value"
            :label="item.value"

        >
          {{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 案例列表 -->
    <div class="case-list">
      <div
          v-for="caseItem in filteredCases"
          :key="caseItem.id"
          class="case-card">
        <!-- 案例头部 -->
        <div class="case-header">
          <div class="meta-left">
            <el-tag :type="caseTypeStyle[caseItem.type]" size="large">
              {{ caseTypeLabels[caseItem.type] }}
            </el-tag>
            <span class="improvement">
              <el-icon><CaretTop /></el-icon>
              通过率提升 {{ caseItem.improvement }}
            </span>
          </div>
          <h3 class="case-title">{{ caseItem.title }}</h3>
        </div>

        <!-- 对比区 -->
        <div class="compare-section">
          <div class="compare-block original">
            <div class="block-header">
              <el-icon><Document /></el-icon>
              <span>优化前版本</span>
            </div>
            <pre>{{ caseItem.original }}</pre>
          </div>

          <div class="compare-block optimized">
            <div class="block-header">
              <el-icon><MagicStick /></el-icon>
              <span>优化后版本</span>
            </div>
            <pre>{{ caseItem.optimized }}</pre>
          </div>
        </div>

        <!-- AI建议 -->
        <div class="suggestion-section">
          <div class="section-title">
            <el-icon><Comment /></el-icon>
            AI优化建议（共{{ caseItem.suggestions.length }}条）
          </div>
          <div class="suggestion-list">
            <div
                v-for="(suggestion, sIndex) in caseItem.suggestions"
                :key="sIndex"
                class="suggestion-item"
            >
              <div class="index">{{ sIndex + 1 }}.</div>
              <div class="content">
                <h5>{{ suggestion.title }}</h5>
                <p>{{ suggestion.detail }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Opportunity,
  Document,
  MagicStick,
  Comment,
  CaretTop
} from '@element-plus/icons-vue'

// 筛选选项配置
const filterOptions = [
  { value: 'all', label: '全部案例' },
  { value: 'technical', label: '技术岗位' },
  { value: 'management', label: '管理岗位' },
  { value: 'fresh', label: '应届毕业生' }
]

// 案例类型标签映射
const caseTypeLabels = {
  technical: '技术岗',
  management: '管理岗',
  fresh: '应届生'
}

// 案例数据
const cases = ref([
  {
    id: 1,
    type: 'technical',
    typeLabel: '技术岗',
    title: 'Java开发工程师简历优化',
    views: 1423,
    improvement: '68%',
    original: `工作经历：
- 负责系统开发
- 用Java写代码
- 参与项目会议`,
    optimized: `工作经历（STAR法则重构）：
- 主导XX系统微服务重构，采用Spring Cloud架构，QPS提升300%
- 开发核心交易模块，日均处理订单量50万+
- 设计并实施Redis缓存方案，API响应时间减少80%`,
    suggestions: [
      { title: '量化成果', detail: '添加具体性能指标和数据成果' },
      { title: '技术栈明确', detail: '突出Spring Cloud等核心技术' }
    ]
  },
  {
    id: 2,
    type: 'management',
    typeLabel: '管理岗',
    title: '产品总监简历优化',
    views: 892,
    improvement: '55%',
    original: `工作经历：
- 负责产品团队管理
- 规划产品路线
- 协调各部门工作`,
    optimized: `工作经历（数据驱动优化）：
- 领导15人产品团队，成功推出3款DAU超50万的产品
- 制定3年产品战略规划，推动公司估值增长300%
- 建立跨部门协作机制，需求交付效率提升40%`,
    suggestions: [
      { title: '管理成果量化', detail: '添加团队规模和业务影响数据' },
      { title: '战略高度体现', detail: '突出长期规划能力' }
    ]
  },
  {
    id: 3,
    type: 'fresh',
    typeLabel: '应届生',
    title: '应届毕业生简历优化',
    views: 1567,
    improvement: '82%',
    original: `教育背景：
XX大学计算机专业
实习经历：
- 参与小程序开发
- 协助测试工作`,
    optimized: `教育背景（重点突出）：
- GPA 3.8/4.0，专业前10%，获校级一等奖学金
- 主修课程：数据结构（95）、算法设计（92）

项目经历：
- 独立开发校园二手交易小程序，日均UV 500+
- 使用Jest实现自动化测试，用例覆盖率达85%`,
    suggestions: [
      { title: '教育背景强化', detail: '突出成绩和主修课程' },
      { title: '项目经验包装', detail: '使用量化数据展示成果' }
    ]
  },
  {
    id: 4,
    type: 'technical',
    typeLabel: '技术岗',
    title: '前端工程师简历优化',
    views: 1024,
    improvement: '72%',
    original: `技能：
- 会Vue和React
- 了解前端开发`,
    optimized: `技术栈（专业化表达）：
- 精通Vue3生态（Pinia+Vite+TS），主导过3个大型项目架构
- 熟练React18+Next.js开发，熟悉Server Components应用
- 前端工程化实践：搭建CI/CD流程，构建效率提升60%`,
    suggestions: [
      { title: '技术深度展现', detail: '使用专业术语和版本号' },
      { title: '工程化能力', detail: '体现架构和效率优化经验' }
    ]
  }
]) // 保持之前的案例数据不变

// 筛选逻辑
const filterType = ref('all')
const caseTypeStyle = {
  technical: 'warning',
  management: 'danger',
  fresh: 'success'
}

const filteredCases = computed(() => {
  return filterType.value === 'all'
      ? cases.value
      : cases.value.filter(c => c.type === filterType.value)
})
</script>

<style lang="scss" scoped>
.optimize-case-page {
  --page-width: 1200px;
  --card-padding: 32px;
  --border-color: #e4e7ed;
  --primary-color: #409EFF;
  --success-color: #67c23a;

  max-width: var(--page-width);
  margin: 0 auto;
  padding: 48px 24px;

  .page-header {
    text-align: center;
    margin-bottom: 48px;

    .gradient-title {
      font-size: 2.8rem;
      background: linear-gradient(135deg, var(--primary-color) 0%, #36c2cf 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 0 16px;

    }

    .page-subtitle {
      font-size: 1.2rem;
      color: #606266;
    }
  }

  .filter-bar {
    margin: 40px 0;
    position: sticky;
    top: 70px;
    z-index: 100;
    background: white;
    padding: 16px 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);

    .el-radio-group {
      display: flex;
      grid-template-columns: repeat(4, 160px);

      .el-radio-button.is-active {
        .el-radio-button__inner {
          background: var(--primary-color);
          border-color: var(--primary-color);
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
        }
      }
    }
  }

  .case-list {
    display: grid;
    gap: 32px;
    position: relative;
    z-index: 50;
  }

  .case-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: var(--card-padding);
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-4px);
    }

    .case-header {
      margin-bottom: 32px;

      .meta-left {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-bottom: 16px;

        .el-tag {
          font-size: 16px;
          padding: 8px 16px;
          border-radius: 6px;
        }

        .improvement {
          color: var(--success-color);
          font-weight: 500;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }

      .case-title {
        font-size: 1.5rem;
        margin: 0;
        color: #303133;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .compare-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 40px;

      .compare-block {
        border: 2px solid var(--border-color);
        border-radius: 8px;
        padding: 24px;
        box-sizing: border-box;
        height: auto;
        overflow: auto;

        .block-header {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 1.1rem;
          color: #606266;
          margin-bottom: 24px;
          padding-bottom: 16px;
          border-bottom: 2px solid var(--border-color);

          .el-icon {
            font-size: 1.4em;
          }
        }

        pre {
          margin: 0;
          font-family: 'JetBrains Mono', monospace;
          font-size: 14px;
          line-height: 1.8;
          white-space: pre-wrap;
          color: #303133;
          min-width: 480px;
        }

        &.optimized {
          border-color: #c2e7b0;
          background: #f8fff3;
        }
      }
    }

    .suggestion-section {
      border-top: 2px solid var(--border-color);
      padding-top: 32px;

      .section-title {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .suggestion-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 24px;

        .suggestion-item {
          display: flex;
          gap: 16px;
          padding: 16px;
          background: #f8f9fa;
          border-radius: 8px;
          transition: transform 0.3s;

          &:hover {
            transform: translateX(8px);
          }

          .index {
            font-weight: 600;
            color: var(--primary-color);
            min-width: 32px;
          }

          h5 {
            margin: 0 0 8px;
            font-size: 1.05rem;
          }

          p {
            margin: 0;
            color: #606266;
            line-height: 1.6;
          }
        }
      }
    }
  }
}
</style>